<template>
	<yb-list
	custom-class="yb-flex-1"
	:custom-style="{
		'background-color': skinColor.color_gap_1
	}"
	ref="list"
	type="page"
	:bounce="bounce"
	:empty="emptySync"
	:loading="loadingSync"
	:pulldown="pulldownSync"
	:loadmore="loadmoreSync"
	@pulldown="onPulldown"
	@loadmore="onLoadmore">
		<slot></slot>
		<yb-list-item>
			<yb-gap :size="10"></yb-gap>
		</yb-list-item>
		<yb-list-item v-for="(grid, i) in Math.ceil(listSync.length / 2)" :key="i">
			<yb-grid custom-style="margin-left: 10rpx;margin-right: 10rpx;margin-bottom: 10rpx;" custom-class="yb-flex-1" :data="listSync.slice(i * 2, (i + 1) * 2)" :column="2" gap="10rpx" :count="2">
				<template v-for="(item, index) in listSync.slice(i * 2, (i + 1) * 2)" :slot="index">
					<view class="grid_item_1 yb-flex yb-flex-1"
					@longpress="onShowItemMore(item)"
					@tap="app.$business.openDetail(item)"
					:style="{
						'background-color': skinColor.color_bg_1
					}">
						<view class="yb-flex yb-flex-1 cover-box">
							<rd-image
							lazyLoad
							class="yb-flex-1"
							borderTopLeftRadius="20"
							borderTopRightRadius="20"
							:src="app.$business.getCover(item)" mode="aspectFill"></rd-image>
							<view class="mask"></view>
							<view class="tip yb-flex yb-row yb-align-center">
								<view class="yb-flex yb-row yb-align-center yb-flex-1">
									<view class="yb-flex yb-row yb-align-center" v-if="item.readnum" style="margin-right: 30rpx;">
										<yb-icon name="eye-on" :color="skinColor.color_white" :size="24"></yb-icon>
										<text class="tip-text" :style="{
											color: skinColor.color_white
										}">{{app.$utils.numtounit(item.readnum)}}</text>
									</view>
									<view class="yb-flex yb-row yb-align-center" v-if="item.collect">
										<rd-icon name="love" size="24" :color="skinColor.color_white"></rd-icon>
										<text class="tip-text" :style="{
											color: skinColor.color_white
										}">{{app.$utils.numtounit(item.collect)}}</text>
									</view>
								</view>
								<view class="yb-flex" style="margin-left: 30rpx;" v-if="getTip(item)">
									<text class="tip-text" :style="{
										color: skinColor.color_white
									}">{{getTip(item)}}</text>
								</view>
							</view>
						</view>
						<view class="info yb-flex">
							<yb-text custom-class="title" :lines="2" :lineHeight="34" :size="28" :color="skinColor.color_1" :value="(app.$config.characterTypes.single[item.type] ? item.name : item.title) || item.desc || '这是来自' + app.$business.filterSource(item.source).title + '的' + app.$business.getType(item.type)"></yb-text>
							<view class="yb-flex yb-row yb-align-center" style="margin-top: 10rpx;">
								<view class="yb-flex yb-row yb-align-center yb-flex-1">
									<rd-icon class="icon" name="person" size="25" :color="skinColor.color_2"></rd-icon>
									<yb-text custom-class="yb-flex-1" custom-style="margin-left: 10rpx" :lines="1" :size="24" :color="skinColor.color_3" :value="item.creator || app.$business.filterSource(item.source).title"></yb-text>
								</view>
								<yb-tag custom-style="margin-left: 10rpx" :options="{
									size: 18,
									color: skinColor.color_white,
									bgColor: app.$business.getColor(item.type)
								}" :value="app.$business.getType(item.type)"></yb-tag>
							</view>
						</view>
					</view>
				</template>
			</yb-grid>
			<slot name="bottom"></slot>
		</yb-list-item>
	</yb-list>
</template>

<script>
	import appMixin from '@/common/mixin/app.js';
	export default {
		mixins: [appMixin],
		props: {
			list: {
				type: Array,
				default () {
					return new Array
				}
			},
			index: {
				type: [Number,String],
				default: -1
			},
			bounce: {
				type: Boolean,
				default: true
			},
			loading: {
				type: [Boolean,Object,String],
				default: false
			},
			empty: {
				type: [Boolean,Object,String],
				default: false
			},
			pulldown: {
				type: [Boolean,Object],
				default: false
			},
			loadmore: {
				type: [Boolean,Object],
				default: false
			}
		},
		computed: {
			emptySync () {
				return Object.assign({}, {
					show: false,
					text: '暂无数据',
					color: this.skinColor.color_3,
					bgColor: this.skinColor.color_gap_1
				}, this.app.$utils.typeof(this.empty) == 'String' ? {text: this.empty} : this.app.$utils.typeof(this.empty) == 'Boolean' ? {show: this.empty} : this.empty)
			},
			loadingSync () {
				return Object.assign({}, {
					show: false,
					text: '加载中',
					color: this.skinColor.color_1,
					bgColor: this.skinColor.color_gap_1
				}, this.app.$utils.typeof(this.loading) == 'String' ? {text: this.loading} : this.app.$utils.typeof(this.loading) == 'Boolean' ? {show: this.loading} : this.loading)
			},
			pulldownSync () {
				return Object.assign({}, {
					show: false,
					color: this.skinColor.color_1
				}, this.app.$utils.typeof(this.pulldown) == 'Boolean' ? {show: this.pulldown} : this.pulldown)
			},
			loadmoreSync () {
				return Object.assign({}, {
					show: !this.isLastPage,
					color: this.skinColor.color_1,
					bottom: '30px'
				}, this.app.$utils.typeof(this.loadmore) == 'Boolean' ? {show: this.loadmore} : this.loadmore)
			},
			listSync () {
				return this.list.slice(0, Math.min(this.page * this.size, this.list.length))
			},
			isLastPage () {
				return this.page * this.size >= this.list.length
			}
		},
		data () {
			return {
				page: 1,
				size: 20,
				isLoadmoreEnd: false
			}
		},
		methods: {
			onPulldown (callback) {
				this.page = 1
				this.isLoadmoreEnd = false
				if ( this.index > -1 ) {
					this.$emit('pulldown', this.index, callback)
				} else {
					this.$emit('pulldown', callback)
				}
			},
			onLoadmore (callback) {
				if ( this.isLastPage ) {
					if ( this.page * this.size == this.listSync.length ) {
						this.page++
					} 
					if ( this.index > -1 ) {
						this.$emit('loadmore', this.index, callback)
					} else {
						this.$emit('loadmore', callback)
					}
				} else {
					this.page++
					callback('success')
				}
			},
			resetLoadmore () {
				this.isLoadmoreEnd = false
				this.$refs.list.resetLoadmore()
			},
			backTop () {
				this.$refs.list.backTop()
			},
			setLoadmoreEnd () {
				this.isLoadmoreEnd = true
				if ( this.isLastPage ) this.$refs.list.setLoadmoreEnd()
			},
			setLoadmoreSuccess() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreSuccess()
			},
			setLoadmoreFail() {
				this.isLoadmoreEnd = false
				if ( this.isLastPage ) this.$refs.list.setLoadmoreFail()
			},
			onShowItemMore (params) {
				this.$emit('itemLongpress', params)
			},
			getTip (item) {
				if ( this.app.$config.videoTypes.single[item.type] ) {
					if ( item.duration ) {
						return this.app.$utils.timeFormat(item?.duration)
					} else if ( item.latest ) {
						return item.latest
					} else if ( item.style ) {
						return item.style
					} else {
						return item.isEnd ? '已完结' : '连载中'
					}
				} else {
					return item.latest || item.style || item.size || ''
				}
			}
		},
		watch: {
			isLastPage (newVal) {
				if ( !newVal ) {
					this.$refs.list && this.$refs.list.setLoadmoreSuccess()
				} else {
					if ( this.isLoadmoreEnd ) {
						this.$refs.list && this.$refs.list.setLoadmoreEnd()
					}
				}
			},
			list (newVal) {
				if ( newVal.length < this.page * this.size ) {
					this.page = Math.ceil(newVal.length / 20) > 0 ? Math.ceil(newVal.length / 20) : 1
				}
			}
		}
	}
</script>

<style>
.grid_item_1 {
	border-radius: 20rpx;
	position: relative;
	height: 400rpx;
}
.grid_item_1 .info {
	padding: 20rpx;
}
.grid_item_1 .title {
	height: 68rpx;
}
.grid_item_1 .cover-box {
	position: relative;
}
.grid_item_1 .mask{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0,0,0,.2);
	border-top-left-radius: 20rpx;
	border-top-right-radius: 20rpx;
}
.grid_item_1 .tip {
	position: absolute;
	left: 10rpx;
	right: 10rpx;
	bottom: 10rpx;
}
.grid_item_1 .tip-text {
	font-size: 24rpx;
	margin-left: 10rpx;
	text-overflow: ellipsis;
	lines: 1;
}
.grid-item-2 {
	position: relative;
}
.grid-item-2 .cover {
	width: 200rpx;
	height: 200rpx;
	border-radius: 200rpx;
	border-width: 10rpx;
	border-style: solid;
}
.grid-item-2 .type {
	font-size: 20rpx;
	padding: 5rpx 15rpx;
	text-align: center;
	width: 80rpx;
	border-radius: 5rpx;
	margin-top: -30rpx;
}
.grid-item-2 .character-rank {
	width: 80rpx;
	border-top-right-radius: 100rpx;
	border-top-left-radius: 100rpx;
}
.grid-item-2 .character-rank .text {
	font-size: 26rpx;
	text-align: center;
}
.grid-item-2 .name {
	font-size: 28rpx;
	margin-top: 10rpx;
	lines: 1;
	text-overflow: ellipsis;
}
.rank {
	position: absolute;
	top: 0;
	left: 0;
	width: 60rpx;
	height: 30rpx;
	align-items: center;
	justify-content: center;
	border-bottom-right-radius: 20rpx;
}
.rank .text {
	font-size: 24rpx;
	font-weight: bold;
}
</style>
